<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>命名视图</title>
    <script src="https://unpkg.com/vue@2.7.7/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app1" style="border: 1px dashed red;margin-bottom: 2px;">
      <router-link to="/">to foo</router-link>
      <router-view class="view one"></router-view>
      <router-view class="view two" name="a"></router-view>
      <router-view class="view three" name="b"></router-view>
    </div>

    <div id="app2" style="border: 1px dashed blue;margin-bottom: 2px;">
      <router-link to="/settings/emails">to settings-emails</router-link>
      <router-link to="/settings/profile">to settings-profile</router-link>
      <router-view class="view one"></router-view>
    </div>

    <script type="text/javascript">
      // 1 命名视图
      const Foo = {template: '<div>Foo</div>'}
      const Bar = {template: '<div>Bar</div>'}
      const Baz = {template: '<div>Baz</div>'}
      //   一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：
      const router = new VueRouter({
        routes: [
          {
            path: '/',
            components: {
              default: Foo,
              a: Bar,
              b: Baz
            }
          }
        ]
      })
      
      const vm1 = new Vue({
        router
      }).$mount('#app1')
      
      // 2 嵌套命名视图
      Vue.component('NavBar', {
        template: '<div>NavBar</div>'
      })
      
      const UserSettings = {
        template: `
          <div>
            <h3>User Settings</h3>
            <NavBar/>
            <router-view/>
            <router-view name="helper"/>
          </div>
        `
      }
      const UserEmailsSubscriptions = {template: '<div>UserEmailsSubscriptions</div>'}
      const UserProfile = {template: '<div>UserProfile</div>'}
      const UserProfilePreview = {template: '<div>UserProfilePreview</div>'}

      const router2 = new VueRouter({
        routes: [
          {
            path: '/settings',
            // 你也可以在顶级路由就配置命名视图
            component: UserSettings,
            children: [{
              path: 'emails',
              component: UserEmailsSubscriptions
            },{
              path: 'profile',
              components: {
                default: UserProfile,
                helper: UserProfilePreview
              }
            }]
          }
        ]
      })
      
      const vm2 = new Vue({
        router: router2
      }).$mount('#app2')
    </script>
  </body>
</html>